<template>
  <div id="rightDrawer-root" class="rightDrawer-root">

    <lark-drawer border :title="title" direction="right" width="400px" title-height="40px">
      <div class="rightDrawer-body">
        <expert-detail v-if="viewType == 1" :expertId="expertId"></expert-detail>
        <div style=" width: 100%" v-else>
          <div class="store-row">
            <div class="store-row-label">库体温度</div>
            <div class="store-row-value">-10°C</div>
          </div>
          <div class="store-row">
            <div class="store-row-label">库体湿度</div>
            <div class="store-row-value">60%</div>
          </div>
          <div class="store-row">
            <div class="store-row-label">二级缓存区温度</div>
            <div class="store-row-value">-20°C</div>
          </div>
          <div class="store-row">
            <div class="store-row-label">二级缓存区湿度</div>
            <div class="store-row-value">80%</div>
          </div>
          <div class="store-pic" @click="bigPic(`http://10.1.17.93:3000/static/images/zhongye/1.jpg`)">
            <img width="100%" height="100%" src="http://10.1.17.93:3000/static/images/zhongye/1.jpg"/>
          </div>
        </div>
      </div>
    </lark-drawer>


  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import expertDetail from '@/components/ServiceComponents/expertDetail'
  import { larkViewer } from 'lark-common'

  export default {
    name: 'rightDrawer',
    props: {
      viewType: {
        type: String,
        default: '1'
      },
      expertId: {
        type: [String, Number],
        default: null
      }
    },
    components: {
      expertDetail
    },
    setup(props, content) {
      let data = reactive({
        title: '专家信息'
      })

      onMounted(async() => {
      })
      const bigPic = (src) => {
        larkViewer([{ src: src }])

      }

      return { ...toRefs(data), bigPic }
    }
  }
</script>

<style scoped lang="scss">
  .rightDrawer-root {
    .rightDrawer-body {
      height: 48vh;
      padding: 10px 10px;

      .store-pic {
        width: 280px;
        height: 200px;
        text-align: center;
        margin: 35px auto 0 auto;
      }

      .store-row {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 40px;

        .store-row-label {
          flex-basis: 150px;
        }

        .store-row-value {
          flex-basis: 150px;
        }
      }
    }
  }
</style>
